<template>
  <div class="hp_blog_row">
    <div @click="blogDetail" class="hp_blog_title sigle-more cursor"
         :title="title">
      {{title}}
    </div>
    <div class="hp_blog_des two-more">{{des}}</div>
    <div class="hp_blog_option">
      <div class="hp_blog_show">
        <div class="hp_blog_time">
          <img :src="require('./img/time.png')">
          {{$moment(new Date(time)).format('YYYY-MM-DD')}}
        </div>
        <div class="hp_blog_time">
          <img :src="require('./img/see.png')">
          {{seeTimes}}
        </div>
      </div>
    </div>
    <dividing-line />
  </div>
</template>

<script>
export default {
  name: 'blog-row',
  props: {
    title: String,
    des: String,
    time: Number,
    seeTimes: Number,
    id: Number
  },
  methods: {
    blogDetail () {
      this.$router.push({
        path: '/bolgDetail',
        query: {
          id: this.id
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.hp_blog_row {
  width 100%
  box-sizing border-box
  padding-left 10px
  padding-right 10px
  .hp_blog_title {
    font-family: Roboto,Helvetica,Tahoma,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK","WenQuanYi Micro Hei",sans-serif;
    font-size 22px
    color #333
    line-height 60px
  }
  .hp_blog_title:hover {
    color #076dd0
  }
  .hp_blog_des {
    font-family: Roboto,Helvetica,Tahoma,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK","WenQuanYi Micro Hei",sans-serif;
    font-size 16px
    color #444
    line-height 24px
  }
  .hp_blog_option {
    display flex
    align-items center
    line-height 30px
    .hp_blog_show {
      display flex
      align-items center
      .hp_blog_time {
        color #bfbfbf
        display flex
        align-items center
        font-size 12px
        margin-right 30px
        img {
          margin-right 5px
          width 15px
          height auto
        }
      }
    }
  }
}
</style>
